<template>
	<div>
		<!-- 全局数据操作按钮 -->
<!-- 		<p>
			<button class="btn btn-white btn-default btn-round" @click="list(1)">
				<i class="ace-icon fa fa-refresh"></i>刷新
			</button>
			&nbsp;
			<button class="btn btn-white btn-default btn-round" @click="add">
				<i class="ace-icon glyphicon glyphicon-plus"></i>新增
			</button>
			&nbsp;
			<button class="btn btn-white btn-default btn-round" @click="test">
				<i class="ace-icon glyphicon glyphicon-tent"></i>测试
			</button>
		</p> -->


		<!--模态框 -->
<!-- 		<div>
			<save id="save-modal" :file="file"></save>
		</div> -->

		<!-- 列表数据 -->
		<table id="simple-table" class="table  table-bordered table-hover">
			<thead>
				<tr>
					<th>id</th>
					<th>图像</th>
					<th>文件类型</th>
					<th>大小</th>
					<th>用途</th>
				</tr>
			</thead>
	
			<tbody class="tbody">
				<tr v-for="item in files" :key="item.id">
					<td>{{item.id}}</td>
					<td style="width: 200px">
						<div >
							<img :src="fileUrl + item.path" class="overflow-hide" :title="fileUrl + item.path" style="width:100%; max-height: 300px;">
						</div>
					</td>
					<td>{{item.suffix}}</td>
					<td>{{$global.format.formatFileSize(item.size)}}</td>
					<td>{{$global.enums.getValue(item.purpose, $global.enums.FILE_PURPOSE)}}</td>
				</tr>
			</tbody>
		</table>

		<div class="paginations">
			<pagination :list="list" ref="pagination"></pagination>
		</div>
	</div>
</template>

<script>
	import pagination from '@/views/components/pagination'
	export default {
		data() {
			return {
				files: [],
				fileUrl: this.$global.constant.FILE_URL
			}
		},
		components: {
			pagination
		},
		mounted() {
			this.list(1)
		},
		methods: {
			list(page) {
				let param = {
					pageIndex: page,
					pageSize: this.$refs.pagination.size
				}
				let url = process.env.VUE_APP_SERVER + 'file/admin/file/list'
				this.$axios.post(url, param)
					.then(res => {
						console.log('file-list')
						let data = res.data.data
						this.files = data.list
						this.$refs.pagination.render(page, data.total)
					})
			},
			test() {
				console.log(process.env.NODE_ENV)
				this.$toast(process.env.VUE_APP_SERVER, this.$global.toast.success)
			},
			add() {
				this.file = {}
				$('#save-modal').modal('show')
			}
		}
	}
</script>

<style scoped>
	.table {
		margin-bottom: 5px;
	}
	th {
		text-align: center;
	}
	
	#simple-table tbody tr td{
		text-align: center;
		vertical-align: middle;
	}

	.paginations {
		text-align: right;
	}
	.overflow-hide {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 1;
	}
</style>
